<template>
  <div class="order-list">
    <van-empty v-if="!orders.length" description="暂无订单" />
    
    <div v-else class="order-items">
      <div v-for="order in orders" :key="order.id" class="order-item" @click="onClickOrder(order)">
        <van-cell-group inset>
          <van-cell :title="'订单号：' + order.id" :value="getStatusText(order.status)" />
          <van-cell v-for="item in order.items" :key="item.id">
            <template #title>
              <div class="item-info">
                <span>{{ item.name }}</span>
                <span class="quantity">x{{ item.quantity }}</span>
              </div>
            </template>
            <template #value>
              <span class="price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
            </template>
          </van-cell>
          <van-cell title="总计" :value="'¥' + order.total.toFixed(2)" />
        </van-cell-group>
        
        <div class="order-actions">
          <van-button
            v-if="order.status === 'pending'"
            size="small"
            type="primary"
            @click="onPay(order)"
          >
            继续支付
          </van-button>
          <van-button
            v-if="canCancel(order)"
            size="small"
            type="danger"
            @click="onCancel(order)"
          >
            取消订单
          </van-button>
          <van-button
            v-if="order.status === 'completed'"
            size="small"
            type="danger"
            @click="onDelete(order)"
          >
            删除订单
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useOrderStore } from '../stores/order'
import { showDialog } from 'vant'

const props = defineProps({
  orders: {
    type: Array,
    required: true
  }
})

const router = useRouter()
const orderStore = useOrderStore()

const getStatusText = (status) => {
  const statusMap = {
    pending: '待付款',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const canCancel = (order) => {
  if (order.status !== 'pending') return false
  const orderTime = new Date(order.createTime)
  const now = new Date()
  const hours = (now - orderTime) / (1000 * 60 * 60)
  return hours <= 2
}

const onPay = (order) => {
  router.push(`/payment?orderId=${order.id}`)
}

const onCancel = (order) => {
  showDialog({
    title: '取消订单',
    message: '确定要取消该订单吗？',
    showCancelButton: true
  }).then(() => {
    orderStore.updateOrderStatus(order.id, 'cancelled')
  })
}

const onDelete = (order) => {
  showDialog({
    title: '删除订单',
    message: '确定要删除该订单吗？',
    showCancelButton: true
  }).then(() => {
    orderStore.deleteOrder(order.id)
  })
}

const onClickOrder = (order) => {
  router.push(`/order-detail/${order.id}`)
}
</script>

<style scoped>
.order-list {
  padding: 10px;
}

.order-item {
  margin-bottom: 15px;
}

.item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity {
  color: #999;
  margin-left: 10px;
}

.price {
  color: #f44;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  background-color: #fff;
}
</style> 